import React, { Component } from 'react';

import { routerRedux, Route, Switch } from 'dva/router';


import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
  Button, Menu, Dropdown, Icon, Row, Col,
  Input, InputNumber,
  Steps, Card, Popover, Badge, Table, Tooltip, Divider,
  Checkbox, Modal, Radio,
  Select, message,
  Form,
} from 'antd';
import classNames from 'classnames';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './ApplyProfile.less';
import u620 from '../../assets/u620.png';
import u622 from '../../assets/u622.png';
import yes from '../../assets/yes.png';
import no from '../../assets/no.png';
import yellow from '../../assets/yellow.png';
import { getRoutes } from '../../utils/utils';

import querystring from 'querystring';

const { Step } = Steps;
const TextArea = Input.TextArea;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const FormItem = Form.Item;

const getWindowWidth = () => (window.innerWidth || document.documentElement.clientWidth);

@connect(({ pendingTask, }) => ({
  pendingTask,
}))
@Form.create()
export default class CompleteApplyDetails3 extends Component {
  state = {
    id: '',
    taskId: '',
    // operationkey: 'tab1',
    stepDirection: 'horizontal',
    modalVisible: false,
    creditVerify: {
      major: {
        reportno: '',
        overdue: '',
        status: '',
      },
      male: {
        reportno: '',
        overdue: '',
        status: '',
      },
      jointly: {
        reportno: '',
        overdue: '',
        status: '',
      },
      jointlyMale: {
        reportno: '',
        overdue: '',
        status: '',
      },
    },
    litigationQuery: {
      major: '',
      male: '',
      jointly: '',
      other: '',
      otherName: '',
    },
    ficoQuery: {
      score: '',
      code: '',
    },
    custTaskListLoading: true,
    maleOverdue: '',
    profileState: null,
    ficoQueryCode0: '',
    ficoQueryCode1: '',
    ficoQueryCode2: '',
    ficoQueryCode3: '',
    note: '',
    ficoQueryScore: '',
    otherDesc: '',
    creditList: {}
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));

    // console.log("qqqqqAAAAAAAAparams.id")
    // console.log(params.custId)
    this.setState({
      id: params.custId,
      taskId: params.taskId,
      reviewState: params.reviewState,
    })
    if (params.custId != null) {
      dispatch({
        type: 'pendingTask/queryCredit',
        payload: {
          id: params.custId,
        },
        callback: () => {
          const { pendingTask: { creditList } } = this.props;
          this.setState({
            creditList: creditList
          })
          if (creditList && creditList.creditVerify) {
            const creditVerify = JSON.parse(eval("(" + JSON.stringify(creditList.creditVerify) + ")"))
            const major = creditVerify.major
            const male = creditVerify.male
            const jointly = creditVerify.jointly
            const jointlyMale = creditVerify.jointlyMale
            this.setState({
              creditVerify: creditVerify,
              creditVerify: {
                ...this.state.creditVerify,
                major: {
                  ...this.state.major,
                  reportno: major.reportno,
                  overdue: major.overdue,
                  status: major.status,
                },
                male: {
                  ...this.state.male,
                  reportno: male.reportno,
                  overdue: male.overdue,
                  status: male.status,
                },
                jointly: {
                  ...this.state.jointly,
                  reportno: jointly.reportno,
                  overdue: jointly.overdue,
                  status: jointly.status,
                },
                jointlyMale: {
                  ...this.state.jointlyMale,
                  reportno: jointlyMale.reportno,
                  overdue: jointlyMale.overdue,
                  status: jointlyMale.status,
                },
              },
              note: creditVerify.note,
              otherDesc: creditList.otherDesc,
            })
            // console.log("this.state.creditVerify.major.overdue")
            // console.log(this.state.creditVerify.major.overdue)
          }

          if (creditList && creditList.litigationQuery) {
            const litigationQuery = JSON.parse(eval("(" + JSON.stringify(creditList.litigationQuery) + ")"))
            this.setState({
              litigationQuery: {
                ...this.state.litigationQuery,
                major: litigationQuery.major,
                male: litigationQuery.male,
                jointly: litigationQuery.jointly,
                other: litigationQuery.other,
                otherName: litigationQuery.otherName,
              },
            })
          }
          if (creditList && creditList.ficoQuery) {
            // console.log("creditList.ficoQuery")   
            // console.log(creditList.ficoQuery)        
            const ficoQuery = JSON.parse(eval("(" + JSON.stringify(creditList.ficoQuery) + ")"))
            const ficoQueryCode = ficoQuery.code
            this.setState({
              // creditVerify: creditVerify,
              ficoQueryCode0: ficoQueryCode[0],
              ficoQueryCode1: ficoQueryCode[1],
              ficoQueryCode2: ficoQueryCode[2],
              ficoQueryCode3: ficoQueryCode[3],
              ficoQuery: {
                ...this.state.ficoQuery,
                score: ficoQuery.score,
                code: ficoQuery.code,
              },
            })
          }
        }
      });
    }
    this.setStepDirection();
    window.addEventListener('resize', this.setStepDirection);
  }

  // componentWillUnmount() {
  //   window.removeEventListener('resize', this.setStepDirection);
  //   this.setStepDirection.cancel();
  // }

  @Bind()
  @Debounce(200)
  setStepDirection() {
    const { stepDirection } = this.state;
    const w = getWindowWidth();
    if (stepDirection !== 'vertical' && w <= 576) {
      this.setState({
        stepDirection: 'vertical',
      });
    } else if (stepDirection !== 'horizontal' && w > 576) {
      this.setState({
        stepDirection: 'horizontal',
      });
    }
  }

  handleClickNotReport = () => {
    message.warning("暂无查询情况")
  }

  render() {
    // const { stepDirection } = this.state;
    // const { pendingTask: { creditList } } = this.props;

    return (
      <div className={styles.tableListForm}>
        <Row>
          {/* <Row> */}
          <Col span={21}>
            <Card
              title="申请人"
              bordered={false}
              style={{ marginBottom: 24 }}
            >
              <Form layout="inline">
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                  <Col md={8} sm={24}>
                    <FormItem label="报告编号">
                      <Input value={this.state.creditVerify.major.reportno} />
                    </FormItem>
                  </Col>
                  <Col md={7} sm={24}>
                    <FormItem label="12个月逾期数">
                      <InputNumber value={this.state.creditVerify.major.overdue} />

                    </FormItem>
                  </Col>
                  <Col md={9} sm={24}>
                    <FormItem>
                      <RadioGroup value={this.state.creditVerify.major.status}>
                        <Radio value={"1"}>正常</Radio>
                        <Radio value={"2"}>关注</Radio>
                        <Radio value={"3"}>禁入</Radio>
                      </RadioGroup>
                      {this.state.creditVerify.major.status == "1" ? <img src={yes} /> : null}
                      {this.state.creditVerify.major.status == "2" ? <img src={yellow} /> : null}
                      {this.state.creditVerify.major.status == "3" ? <img src={no} /> : null}
                    </FormItem>
                  </Col>
                </Row>
              </Form>
            </Card>

            <Card
              title="申请人配偶"
              bordered={false}
              style={{ marginBottom: 24 }}
            >
              <Form layout="inline">
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                  <Col md={8} sm={24}>
                    <FormItem label="报告编号">
                      <Input value={this.state.creditVerify.male.reportno} />
                    </FormItem>
                  </Col>
                  <Col md={7} sm={24}>
                    <FormItem label="12个月逾期数">
                      <InputNumber value={this.state.creditVerify.male.overdue} />
                    </FormItem>
                  </Col>
                  <Col md={9} sm={24}>
                    <FormItem>
                      <RadioGroup value={this.state.creditVerify.male.status} >
                        <Radio value={"1"}>正常</Radio>
                        <Radio value={"2"}>关注</Radio>
                        <Radio value={"3"}>禁入</Radio>
                      </RadioGroup>
                      {this.state.creditVerify.male.status == "1" ? <img src={yes} /> : null}
                      {this.state.creditVerify.male.status == "2" ? <img src={yellow} /> : null}
                      {this.state.creditVerify.male.status == "3" ? <img src={no} /> : null}
                    </FormItem>
                  </Col>
                </Row>
              </Form>
            </Card>
            <Card
              title="共同还款人"
              bordered={false}
              style={{ marginBottom: 24 }}
            >
              <Form layout="inline">
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                  <Col md={8} sm={24}>
                    <FormItem label="报告编号">
                      <Input value={this.state.creditVerify.jointly.reportno} />
                    </FormItem>
                  </Col>
                  <Col md={7} sm={24}>
                    <FormItem label="12个月逾期数">
                      <InputNumber value={this.state.creditVerify.jointly.overdue} />
                    </FormItem>
                  </Col>
                  <Col md={9} sm={24}>
                    <FormItem>
                      <RadioGroup value={this.state.creditVerify.jointly.status} >
                        <Radio value={"1"}>正常</Radio>
                        <Radio value={"2"}>关注</Radio>
                        <Radio value={"3"}>禁入</Radio>
                      </RadioGroup>
                      {this.state.creditVerify.jointly.status == "1" ? <img src={yes} /> : null}
                      {this.state.creditVerify.jointly.status == "2" ? <img src={yellow} /> : null}
                      {this.state.creditVerify.jointly.status == "3" ? <img src={no} /> : null}
                    </FormItem>
                  </Col>
                </Row>
              </Form>
            </Card>
            <Card
              title="共同还款人配偶"
              bordered={false}
              style={{ marginBottom: 24 }}
            >
              <Form layout="inline">
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                  <Col md={8} sm={24}>
                    <FormItem label="报告编号">
                      <Input value={this.state.creditVerify.jointlyMale.reportno} />
                    </FormItem>
                  </Col>
                  <Col md={7} sm={24}>
                    <FormItem label="12个月逾期数">
                      <InputNumber value={this.state.creditVerify.jointlyMale.overdue} />
                    </FormItem>
                  </Col>
                  <Col md={9} sm={24}>
                    <FormItem>
                      <RadioGroup value={this.state.creditVerify.jointlyMale.status}>
                        <Radio value={"1"}>正常</Radio>
                        <Radio value={"2"}>关注</Radio>
                        <Radio value={"3"}>禁入</Radio>
                      </RadioGroup>
                      {this.state.creditVerify.jointlyMale.status == "1" ? <img src={yes} /> : null}
                      {this.state.creditVerify.jointlyMale.status == "2" ? <img src={yellow} /> : null}
                      {this.state.creditVerify.jointlyMale.status == "3" ? <img src={no} /> : null}
                    </FormItem>
                  </Col>
                </Row>
              </Form>
            </Card>

            <Card
              title="情况说明"
              bordered={false}
              style={{ marginBottom: 24 }}
            >
              <Row>
                <Col span={24}>
                  <TextArea
                    rows={4}
                    placeholder="情况说明"
                    style={{ marginBottom: 15 }}
                    value={this.state.note}
                  />
                </Col>
              </Row>
            </Card>

            <Card
              title="法院被执行人查询"
              bordered={false}
              style={{ marginBottom: 24 }}>
              <Form layout="inline">
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                  <Col md={4} sm={24}>
                    <FormItem >
                      <Checkbox
                        checked={this.state.litigationQuery.major == 1 ? true : false}
                      >申请人</Checkbox>
                    </FormItem>
                  </Col>
                  <Col md={6} sm={24}>
                    <FormItem >
                      <Checkbox
                        checked={this.state.litigationQuery.male == 1 ? true : false}
                      >申请人配偶</Checkbox>
                    </FormItem>
                  </Col>
                  <Col md={6} sm={24}>
                    <FormItem  >
                      <Checkbox
                        checked={this.state.litigationQuery.jointly == 1 ? true : false}
                      >共同还款人</Checkbox>
                    </FormItem>
                  </Col>
                  <Col md={8} sm={24}>
                    <FormItem label="其他">
                      <Input value={this.state.litigationQuery.other} />
                    </FormItem>
                  </Col>
                </Row>
              </Form>
            </Card>

            <Card
              title="FICO系统查询情况"
              bordered={false}
              style={{ marginBottom: 24 }}>

              <Row>
                <Col span={4}>
                  评分结果
            </Col>
                <Col span={20}>
                  <Input style={{ width: 180 }} value={this.state.ficoQuery.score} />
                </Col>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Col span={4}>
                  扣分原因码
            </Col>
                <Col span={20} >
                  <Row type="flex" justify="space-between">

                    <Col span={5} >
                      <Input value={this.state.ficoQuery.code[0]} />
                    </Col>

                    <Col span={5} >
                      <Input value={this.state.ficoQuery.code[1]} />
                    </Col>
                    <Col span={5} >
                      <Input value={this.state.ficoQuery.code[2]} />
                    </Col>
                    <Col span={5} >
                      <Input value={this.state.ficoQuery.code[3]} />
                    </Col>
                  </Row>
                </Col>
              </Row>

              <Row style={{ marginTop: 20 }}>
                <Col span={4}>
                  云钱系统查询情况
              </Col>
                <Col span={20}>
                  <Button type="primary" onClick={this.handleClickNotReport}>查看</Button>
                </Col>
              </Row>
              <Row style={{ marginTop: 16 }}>
                <Col span={4}>
                  其他系统查询情况
                </Col>
                <Col span={20}>

                  <TextArea
                    rows={4}
                    placeholder="情况说明"
                    style={{ marginBottom: 15 }}
                    value={this.state.otherDesc}
                  />
                </Col>
              </Row>
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
}
